<template>
  <div class="UserInfo">
    <div v-if="loading" class="load">loading...</div>
    <div v-else class="user">
      <div class="info">
        <img :src="userInfo.avatar_url" alt="" />
        <span>{{ userInfo.loginname }}</span>
        <p>{{ userInfo.score }}积分</p>
        <p>
          注册时间：<span>{{ userInfo.create_at | formatDate }}</span>
        </p>
      </div>
      <div class="reply">
        <p>回复的主题</p>
        <ul>
          <li v-for="reply in userInfo.recent_replies" :key="reply.id">
            <router-link
              :to="{
                name: 'post_content',
                params: { id: reply.id, name: reply.author.loginname },
              }"
              :title="reply.title"
              >{{ reply.title }}</router-link
            >
          </li>
        </ul>
      </div>
      <div class="create">
        <p>创建的主题</p>
        <ul>
          <li v-for="topic in userInfo.recent_topics" :key="topic.id">
            <router-link
              :to="{
                name: 'post_content',
                params: { id: topic.id, name: topic.author.loginname },
              }"
              :title="topic.title"
              >{{ topic.title }}</router-link
            >
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      userInfo: {},
    };
  },
  
  beforeMount() {
    this.loading = true;
    this.getData();
  },
  methods: {
    async getData() {
      const { data } = await this.$http.get(`/user/${this.$route.params.name}`);
      if (data.success) {
        this.userInfo = data.data;
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
.user {
  width: 65%;
  margin-left: 5%;
  margin-top: 15px;
}
.user .info {
  background-color: white;
  margin-bottom: 15px;
  border-radius: 3px;
  padding: 9px;
}
.user .info img {
  width: 50px;
  height: 50px;
  border-radius: 5px;
}
.user .reply {
  background-color: white;
  margin-bottom: 15px;
  border-radius: 3px;
}
.user .reply p {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  padding-left: 9px;
  background-color: rgba(212, 205, 205, 0.17);
}
.user li {
  padding-left: 10px;
  height: 25px;
  line-height: 25px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.user .reply ul {
  list-style: none;
}
.user .create {
  background-color: white;
  border-radius: 3px;
}
.user .create p {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  padding-left: 9px;
  background-color: rgba(212, 205, 205, 0.17);
}
.user .create ul {
  list-style: none;
}
.user a {
  text-decoration: none;
  color: rgb(105, 175, 233);
}
</style>